<template>
	<div class="app-container">
		<!-- 搜索区域 -->
		<el-form :inline="true" :model="query" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="query.name" placeholder="请输入球队名称" clearable @keyup.enter.native="getTeamsList" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getTeamsList">查询</el-button>
			</el-form-item>
		</el-form>

		<!-- 球队表格 -->
		<el-table :data="teamsList" border style="width: 100%">
			<el-table-column prop="id" label="ID" width="80" />
			<el-table-column prop="teamName" label="球队名称" />
			<el-table-column prop="region" label="地区" />
			<el-table-column label="队徽">
				<template slot-scope="scope">
					<el-image v-if="scope.row.emblemUrl" :src="baseUrl + scope.row.emblemUrl" style="width: 40px; height: 40px" />
				</template>
			</el-table-column>
			<el-table-column label="成员">
				<template slot-scope="scope">
					<el-table :data="scope.row.members" border>
						<el-table-column prop="memberName" label="成员名称" />
						<el-table-column label="头像">
							<template slot-scope="memberScope">
								<el-image v-if="memberScope.row.avator" :src="baseUrl + memberScope.row.avator" style="width: 40px; height: 40px" />
							</template>
						</el-table-column>
						<!-- <el-table-column prop="position" label="位置">
							<template slot-scope="memberScope">
								<el-tag v-if="memberScope.row.position === '1'">队长</el-tag>
								<el-tag v-else type="info">队员</el-tag>
							</template>
						</el-table-column> -->
						<el-table-column prop="joinDate" label="加入时间">
							<template slot-scope="memberScope">
								{{ memberScope.row.joinDate.split("T")[0] }}
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="pagination-container">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="query.pageNum"
				:page-sizes="[10, 20, 30, 50]"
				:page-size="query.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total" />
		</div>
	</div>
</template>

<script>
import { getTeamsList } from "@/api/lv/qd";

export default {
	data() {
		return {
			teamsList: [],
			total: 0,
			query: {
				pageNum: 1,
				pageSize: 10,
				name: ""
			},
			baseUrl: process.env.VUE_APP_BASE_API
		};
	},
	mounted() {
		this.getTeamsList();
	},
	methods: {
		getTeamsList() {
			getTeamsList(this.query).then((res) => {
				this.teamsList = res.data.records;
				this.total = res.data.total;
				console.log(this.teamsList);
			});
		},
		handleSizeChange(val) {
			this.query.pageSize = val;
			this.getTeamsList();
		},
		handleCurrentChange(val) {
			this.query.pageNum = val;
			this.getTeamsList();
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	padding: 20px;
}

.pagination-container {
	margin-top: 20px;
	text-align: right;
}
</style>
